<!DOCTYPE html>

<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<head>
  <meta charset="utf-8">
  <title>Edu Science</title>

  <meta http-equiv="X-UA-7Compatible" content="IE=edge">
  <meta name="description" content="Construction Html5 Template">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">

  <!-- theme meta -->
  <meta name="theme-name" content="educenter" />

  <!-- ** Plugins Needed for the Project ** -->
  <!-- Bootstrap -->
  <link rel="stylesheet" href="/static/plugins/bootstrap/bootstrap.min.css">
  <!--
    Slick是一个响应式的、触摸友好的jQuery滑块插件，常用于创建轮播图、图片展示等
  -->
  <link rel="stylesheet" href="/static/plugins/slick/slick.css">
  <!--
    引入了Themify Icons的样式表。Themify Icons是一个包含大量矢量图标的图标库，可用于网页设计和开发
   -->
  <link rel="stylesheet" href="/static/plugins/themify-icons/themify-icons.css">
  <!--
    引入了Animation CSS的样式表。这个库提供了一系列的CSS动画类，可以很容易地添加到HTML元素中，实现各种动画效果
   -->
  <link rel="stylesheet" href="/static/plugins/animate/animate.css">
  <!--
    引入了AOS（Animate on Scroll）的样式表。AOS是一个JavaScript库，它可以在元素滚动到视口时触发动画效果
   -->
  <link rel="stylesheet" href="/static/plugins/aos/aos.css">
  <!--
    引入了Venobox Popup的的样式表。Venobox是一个用于创建模态框（modal boxes）或弹出窗口（popups）的JavaScript插件，常用于图片展示、视频播放或表单提交等场景
   -->
  <link rel="stylesheet" href="/static/plugins/venobox/venobox.css">

  <!-- Main Stylesheet -->
  <link href="/static/css/style.css" rel="stylesheet">

  <!--Favicon-->
  <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
  <link rel="icon" href="/static/images/favicon.ico" type="image/x-icon">

</head>

<body>
<!-- header -->
<header class="fixed-top header">
  <!-- top header -->
  <div class="top-header py-2 bg-white">
    <div class="container">
      <div class="row no-gutters">
        <div class="col-lg-4 text-center text-lg-left">

          <ul class="list-inline d-inline">
            <li class="list-inline-item mx-0"><a class="d-inline-block p-3 text-color" href="/static/#"><i class="ti-github"></i></a></li>
            <li class="list-inline-item mx-0"><a class="d-inline-block p-3 text-color" href="/static/#"><i class="ti-layout-placeholder"></i></a></li>
            <li class="list-inline-item mx-0"><a class="d-inline-block p-3 text-color" href="/static/#"><i class="ti-linux"></i></a></li>
          </ul>
        </div>
        <div class="col-lg-8 text-center text-lg-right">
          <ul class="list-inline">
            <li class="list-inline-item"><a class="text-uppercase text-color p-sm-3 py-2 px-0 d-inline-block" href="/static/notice.html">通知</a></li>
            <li class="list-inline-item"><a class="text-uppercase text-color p-sm-3 py-2 px-0 d-inline-block" href="/static/#loginModal" data-toggle="modal" data-target="#loginModal">登录</a></li>
            <li class="list-inline-item"><a class="text-uppercase text-color p-sm-3 py-2 px-0 d-inline-block" href="/static/#signupModal" data-toggle="modal" data-target="#signupModal">注册</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- navbar -->
  <div class="navigation w-100">
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-dark p-0">
        <a class="navbar-brand" href="/static/index.html"><img src="/static/images/logo.png" alt="logo"></a>
        <button class="navbar-toggler rounded-0" type="button" data-toggle="collapse" data-target="#navigation"
                aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navigation">
          <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item @@index">
              <a class="nav-link" href="/static/index.html">主页</a>
            </li>
            <li class="nav-item @@courses">
              <a class="nav-link" href="/static/courses.html">课程</a>
            </li>
            <li class="nav-item @@events">
              <a class="nav-link" href="/static/events.html">活动</a>
            </li>
            <li class="nav-item @@blog">
              <a class="nav-link" href="/static/blog.html">资料</a>
            </li>
            <li class="nav-item @@teacher">
              <a class="nav-link" href="/static/teacher.html">老师</a>
            </li>
            <li class="nav-item @@about">
              <a class="nav-link" href="/static/about.html">关于</a>
            </li>
            <li class="nav-item @@contact">
              <a class="nav-link" href="/static/contact.html">联系</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</header>
<!-- /header -->
<!-- Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content rounded-0 border-0 p-4">
      <div class="modal-header border-0">
        <h3>Register</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="login">
          <form action="#" class="row">
            <div class="col-12">
              <input type="text" class="form-control mb-3" id="signupPhone" name="signupPhone" placeholder="Phone">
            </div>
            <div class="col-12">
              <input type="text" class="form-control mb-3" id="signupName" name="signupName" placeholder="Name">
            </div>
            <div class="col-12">
              <input type="email" class="form-control mb-3" id="signupEmail" name="signupEmail" placeholder="Email">
            </div>
            <div class="col-12">
              <input type="password" class="form-control mb-3" id="signupPassword" name="signupPassword" placeholder="Password">
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary">SIGN UP</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content rounded-0 border-0 p-4">
      <div class="modal-header border-0">
        <h3>Login</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="#" class="row">
          <div class="col-12">
            <input type="text" class="form-control mb-3" id="loginPhone" name="loginPhone" placeholder="Phone">
          </div>
          <div class="col-12">
            <input type="text" class="form-control mb-3" id="loginName" name="loginName" placeholder="Name">
          </div>
          <div class="col-12">
            <input type="password" class="form-control mb-3" id="loginPassword" name="loginPassword" placeholder="Password">
          </div>
          <div class="col-12">
            <button type="submit" class="btn btn-primary">LOGIN</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- page title -->
<section class="page-title-section overlay" data-background="/static/images/backgrounds/page-title.jpg">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <ul class="list-inline custom-breadcrumb mb-2">
          <li class="list-inline-item"><a class="h2 text-primary font-secondary" href="/static/events.html">活动</a></li>
          <li th:text="${activity.getIntroduction()}" class="list-inline-item text-white h3 font-secondary nasted">Event Details</li>
        </ul>
        <p class="text-lighten mb-0">Our courses offer a good compromise between the continuous assessment favoured by some universities and the emphasis placed on final exams by others.</p>
      </div>
    </div>
  </div>
</section>
<!-- /page title -->

<!-- event single -->
<section class="section-sm">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="section-title" th:text="${activity.getIntroduction()}">English Spoken</h2>
      </div>
      <!-- event image -->
      <div class="col-12 mb-4">
        <img th:src="${activity.getPhoto()}" alt="event thumb" class="img-fluid w-100"
        style="height: 460px;">
      </div>
    </div>
    <!-- event info -->
    <div class="row align-items-center mb-5">
      <div class="col-lg-9">
        <ul class="list-inline">
          <li class="list-inline-item mr-xl-5 mr-4 mb-3 mb-lg-0">
            <div class="d-flex align-items-center">
              <i class="ti-location-pin text-primary icon-md mr-2"></i>
              <div class="text-left">
                <h6 class="mb-0">地点</h6>
                <p class="mb-0" th:text="${activity.getPlace()}">Dhanmondi, Dhaka</p>
              </div>
            </div>
          </li>
          <li class="list-inline-item mr-xl-5 mr-4 mb-3 mb-lg-0">
            <div class="d-flex align-items-center">
              <i class="ti-calendar text-primary icon-md mr-2"></i>
              <div class="text-left">
                <h6 class="mb-0">时间</h6>
                <p class="mb-0" th:text="${activity.getDate()}">December-12-18</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="col-lg-3 text-lg-right text-left">
        <a href="/staticevent-single.html" class="btn btn-primary">Apply now</a>
      </div>
      <!-- border -->
      <div class="col-12 mt-4 order-4">
        <div class="border-bottom border-primary"></div>
      </div>
    </div>
    <!-- event details -->
    <div class="row">
      <div class="col-12 mb-50">
        <h3>活动介绍</h3>
        <p th:text="${activity.getIntroductory()}">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
          anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
          laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
          dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
          consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
          ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut
          labore et dolore magnam aliquam quaerat voluptatem.</p>
      </div>
    </div>
  </div>
</section>
<!-- /event single -->

<!-- more event -->
<section class="section pt-0">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="section-title">更多活动</h2>
      </div>
    </div>
    <div class="row justify-content-center">
      <!-- event -->
      <div class="col-lg-4 col-sm-6 mb-5 mb-lg-0">
        <div class="card border-0 rounded-0 hover-shadow">
          <div class="card-img position-relative">
            <img class="card-img-top rounded-0" src="/staticimages/events/event-1.jpg" alt="event thumb">
            <div class="card-date"><span>18</span><br>December</div>
          </div>
          <div class="card-body">
            <!-- location -->
            <p><i class="ti-location-pin text-primary mr-2"></i>Dhanmondi Lake, Dhaka</p>
            <a href="/staticevent-single.html"><h4 class="card-title">Lorem ipsum dolor amet, consectetur adipisicing.</h4></a>
          </div>
        </div>
      </div>
      <!-- event -->
      <div class="col-lg-4 col-sm-6 mb-5 mb-lg-0">
        <div class="card border-0 rounded-0 hover-shadow">
          <div class="card-img position-relative">
            <img class="card-img-top rounded-0" src="/staticimages/events/event-2.jpg" alt="event thumb">
            <div class="card-date"><span>21</span><br>December</div>
          </div>
          <div class="card-body">
            <!-- location -->
            <p><i class="ti-location-pin text-primary mr-2"></i>Dhanmondi Lake, Dhaka</p>
            <a href="/staticevent-single.html"><h4 class="card-title">Lorem ipsum dolor amet, consectetur adipisicing.</h4></a>
          </div>
        </div>
      </div>
      <!-- event -->
      <div class="col-lg-4 col-sm-6 mb-5 mb-lg-0">
        <div class="card border-0 rounded-0 hover-shadow">
          <div class="card-img position-relative">
            <img class="card-img-top rounded-0" src="/staticimages/events/event-3.jpg" alt="event thumb">
            <div class="card-date"><span>23</span><br>December</div>
          </div>
          <div class="card-body">
            <!-- location -->
            <p><i class="ti-location-pin text-primary mr-2"></i>Dhanmondi Lake, Dhaka</p>
            <a href="/staticevent-single.html"><h4 class="card-title">Lorem ipsum dolor amet, consectetur adipisicing.</h4></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /more event -->
<!-- footer -->
<footer>
  <!-- newsletter -->
  <div class="newsletter">
    <div class="container">
      <div class="row">
        <div class="col-md-9 ml-auto bg-primary py-5 newsletter-block">
          <h3 class="text-white">Subscribe Now</h3>
          <form action="#">
            <div class="input-wrapper">
              <input type="email" class="form-control border-0" id="newsletter" name="newsletter" placeholder="Enter Your Email...">
              <button type="submit" value="send" class="btn btn-primary">Join</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- footer content -->
  <div class="footer bg-footer section border-bottom">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-sm-8 mb-5 mb-lg-0">
          <!-- logo -->
          <a class="logo-footer" href="/static/index.html"><img class="img-fluid mb-4" src="/static/images/logo.png" alt="logo"></a>
          <ul class="list-unstyled">
            <li class="mb-2">23621 15 Mile Rd #C104, Clinton MI, 48035, New York, USA</li>
            <li class="mb-2">+1 (2) 345 6789</li>
            <li class="mb-2">+1 (2) 345 6789</li>
            <li class="mb-2">contact@yourdomain.com</li>
          </ul>
        </div>
        <!-- company -->
        <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5 mb-md-0">
          <h4 class="text-white mb-5">COMPANY</h4>
          <ul class="list-unstyled">
            <li class="mb-3"><a class="text-color" href="/static/about.html">About Us</a></li>
            <li class="mb-3"><a class="text-color" href="/static/teacher.html">Our Teacher</a></li>
            <li class="mb-3"><a class="text-color" href="/static/contact.html">Contact</a></li>
            <li class="mb-3"><a class="text-color" href="/static/blog.html">Blog</a></li>
          </ul>
        </div>
        <!-- links -->
        <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5 mb-md-0">
          <h4 class="text-white mb-5">LINKS</h4>
          <ul class="list-unstyled">
            <li class="mb-3"><a class="text-color" href="/static/courses.html">Courses</a></li>
            <li class="mb-3"><a class="text-color" href="/static/events.html">Events</a></li>
            <li class="mb-3"><a class="text-color" href="/static/notice.html">Notice</a></li>
            <li class="mb-3"><a class="text-color" href="/static/scholarship.html">Scholarship</a></li>
          </ul>
        </div>
        <!-- support -->
        <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5 mb-md-0">
          <h4 class="text-white mb-5">SUPPORT</h4>
          <ul class="list-unstyled">
            <li class="mb-3"><a class="text-color" href="/static/#">Forums</a></li>
            <li class="mb-3"><a class="text-color" href="/static/#">Documentation</a></li>
            <li class="mb-3"><a class="text-color" href="/static/#!">Language</a></li>
            <li class="mb-3"><a class="text-color" href="/static/#!">Release Status</a></li>
          </ul>
        </div>
        <!-- support -->
        <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5 mb-md-0">
          <h4 class="text-white mb-5">RECOMMEND</h4>
          <ul class="list-unstyled">
            <li class="mb-3"><a class="text-color" href="/static/#">WordPress</a></li>
            <li class="mb-3"><a class="text-color" href="/static/#">LearnPress</a></li>
            <li class="mb-3"><a class="text-color" href="/static/#">WooCommerce</a></li>
            <li class="mb-3"><a class="text-color" href="/static/#">bbPress</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- copyright -->
  <div class="copyright py-4 bg-footer">
    <div class="container">
      <div class="row">
        <div class="col-sm-7 text-sm-left text-center">
          <p class="mb-0">Copyright &copy;
            <script>
              var CurrentYear = new Date().getFullYear()
              document.write(CurrentYear)
            </script>
            , <a class="text-muted" target="_blank" href="/static/http://www.mobanwang.com/" title="网页模板">网页模板</a>
          </p>
        </div>
        <div class="col-sm-5 text-sm-right text-center">
          <ul class="list-inline">
            <li class="list-inline-item"><a class="d-inline-block p-2" href="/static/#"><i class="ti-facebook text-primary"></i></a></li>
            <li class="list-inline-item"><a class="d-inline-block p-2" href="/static/#"><i class="ti-twitter-alt text-primary"></i></a></li>
            <li class="list-inline-item"><a class="d-inline-block p-2" href="/static/#"><i class="ti-github text-primary"></i></a></li>
            <li class="list-inline-item"><a class="d-inline-block p-2" href="/static/#"><i class="ti-instagram text-primary"></i></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>
<!-- /footer -->

<!-- jQuery -->
<script src="/static/plugins/jQuery/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="/static/plugins/bootstrap/bootstrap.min.js"></script>
<!-- slick slider -->
<script src="/static/plugins/slick/slick.min.js"></script>
<!-- aos -->
<script src="/static/plugins/aos/aos.js"></script>
<!-- venobox popup -->
<script src="/static/plugins/venobox/venobox.min.js"></script>
<!-- filter -->
<script src="/static/plugins/filterizr/jquery.filterizr.min.js"></script>
<!-- Main Script -->
<script src="/static/js/script.js"></script>

</body>
</html>